<template>
	<view>
		<cu-custom :bgImage="bgImg" :isBack="true">
			<view slot="content">识别历史</view>
		</cu-custom>
		<view class="mypet-center mt10" v-if="historyList.length >0">
			<u-swipe-action class="pet-profile" v-for="(item,index) in historyList" :key="item._id" :index="index" @click="delHistory" @open="open" :options="options">
				<view class="pet-avatar-box row-start" @click="toShowDetail(item)">
					<image class="pet-avatar" :src="item.imageUrl" mode="aspectFill"></image>
					<view class="row-between flex1">
						<view class="ml30 text-name">
							<text class="lg black">{{item.identify[0].name}}</text>
						</view>
						<viw class="text-sm ">
							<text>相似度:</text>
							<text class="text-green">{{parseInt(item.identify[0].score * 100)}}%</text>
						</viw>
						<u-icon name="arrow-right" />
					</view>
				</view>
				<u-line></u-line>
			</u-swipe-action>
		</view>
		<view v-else class="mypet-center mt10">
			<u-empty></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgImg: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/customBg.jpg',
				historyList: [],
				options: [{
					text: "删除",
					style: {
						backgroundColor: "#dd524d",
					},
				}],
			};
		},
		onLoad() {
			this.getHistory();
		},
		methods: {
			async getHistory() {
				try {
					const { result: { code, msg, data } } = await wx.cloud.callFunction({ name: 'pet', data: { $url: 'getIdentify' } });
					console.log("data", data)
					if (code == 200) {
						this.historyList = data;
					} else {
						this.historyList = [];
					}
				} catch (error) {
					console.error('Error calling cloud function:', error);
					this.historyList = [];
				}
			},
			async delHistory(index, index1) {
				let delItem = this.historyList[index]
				const {result: {code, msg, data}} = await wx.cloud.callFunction({name: 'pet', data: {$url: 'delIdentify', identifyId: delItem._id}})
				if (code == 200) {
					this.$toast({
						title: '删除成功'
					})
				}else {
					this.$toast({
						title: '删除失败'
					})
				}
				this.getHistory()
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.historyList[index].show = true;
				this.historyList.map((val, idx) => {
					if (index != idx) this.historyList[idx].show = false;
				});
			},
			toShowDetail(item) {
				uni.navigateTo({
					url: '/pages_subpackage/result/result?item=' + encodeURIComponent(JSON.stringify(item))
				})
			}
		}
	}
</script>

<style lang="scss">
	.mypet-center {
		.pet-profile {

			// border-top-left-radius: 28rpx;
			// border-top-right-radius: 28rpx;
			.pet-avatar-box {
				padding: 30rpx 20rpx;
				background-color: white;

				// border-top-left-radius: 28rpx;
				// border-top-right-radius: 28rpx;
				.pet-avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
			}

			.row-info {
				padding: 30rpx 20rpx;
				background-color: white;

				.label {
					width: 180rpx;
				}
			}

			.bdb-line {
				border-bottom: 1rpx solid #e5e5e5;
			}
		}

		.save-btn {
			margin-top: 40rpx;
			height: 88rpx;
			margin-left: 54rpx;
			margin-right: 54rpx;
			border-radius: 10rpx;
			box-sizing: border-box;
		}
	}

	.text-name {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		width: 240rpx;
	}
</style>